import React, { useState } from 'react'
import { Header, AlertTip } from 'src/components'

import './index.scss'
const Commend = () => {

    const [showAlert, setShowAlert] = useState(false)
    const [alertText, setAlertText] = useState()
    const fenxiang = () => {
        setShowAlert(true)
        setAlertText('请在饿了么APP中打开')
    }
    const onClose = () => {
        setShowAlert(false)
    }
    return <div className="page_benefit_commend">
        <Header title="推荐有奖" goBack></Header>
        <section className="activity_banner">
            <img src="/images/activity.png" alt="" />
        </section>
        <section className="invite_firend">
            <div className="invite_firend_style">
                <img src="/images/weixin.png" onClick={fenxiang} alt="" />
                <p>邀请微信好友</p>
            </div>
            <div className="invite_firend_style">
                <img src="/images/qq.png" onClick={fenxiang} alt="" />
                <p>邀请QQ好友</p>
            </div>
            <div className="invite_firend_style">
                <img src="/images/fenxiang.png" onClick={fenxiang} alt="" />
                <p>面对面邀请</p>
            </div>
        </section>
        <section className="invite_num">
            <div className="invite_num_style">
                <p>累计收益</p>
                <p><span>0</span>元</p>
            </div>
            <div className="invite_num_style invite_people">
                <p>成功邀请</p>
                <p><span>0</span>人</p>
            </div>
        </section>
        <p className="income_detail">-收益明细-</p>
        <section className="incom_tips">
            <img src="/images/qianbao.png" alt="" />
            <p>还不赶紧去邀请好友</p>
        </section>
        {showAlert && <AlertTip onClose={onClose} alertText={alertText}></AlertTip>}
    </div>
}

export default Commend